<template>
	<div class="detailHeader">
		<el-collapse v-model="activeNames">
			<el-collapse-item title="货权转移" name="1">
				<el-form :model="formData" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
					<el-row :gutter="20">
						<el-col :span="16">
							<el-form-item label="原票货" prop="yph" class="top">
								<el-input
									v-model="yph"
									size="mini"
									disabled
								/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="货转日期" prop="transferDate" class="top">
								<el-date-picker
									v-model="formData.transferDate"
									type="date"
									size="mini"
                  disabled
                  value-format="yyyy-MM-dd"
								></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="目标货主" prop="cargoOwnerId" class="top">
								<el-select
									v-model="formData.cargoOwnerId"
									v-selecttext="formData.cargoOwnerName,cargoOwnerData,'cargoOwnerId'"
									filterable
									collapse-tags
									size="mini"
									clearable
                  disabled
									class="others"
								>
									<el-option
										v-for="item in cargoOwnerData"
										:key="item.cargoOwnerId"
										:label="item.cargoOwnerName"
										:value="item.cargoOwnerId"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="目标货代" prop="cargoAgentId" class="top">
								<el-select
									v-model="formData.cargoAgentId"
									v-selecttext="formData.cargoAgentName,cargoAgentData,'cargoAgentId'"
									filterable
									collapse-tags
									size="mini"
									clearable
                  disabled
									class="others"
								>
									<el-option
										v-for="item in cargoAgentData"
										:key="item.cargoAgentId"
										:label="item.cargoAgentName"
										:value="item.cargoAgentId"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="堆存费起算日期" prop="storageDate" class="top">
								<el-date-picker
									v-model="formData.storageDate"
									type="date"
									size="mini"
                  disabled
                  value-format="yyyy-MM-dd"
								></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="货转件数" prop="quantity" class="top">
								<el-input
									v-model="formData.quantity"
									size="mini"
                  disabled
								/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="货转重量" prop="ton" class="top">
								<el-input
									v-model="formData.ton"
									size="mini"
                  disabled
								/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="货转体积" prop="volume" class="top">
								<el-input
									v-model="formData.volume"
									size="mini"
                  disabled
								/>
							</el-form-item>
						</el-col>
						<el-col :span="16">
							<el-form-item label="备注" prop="remark" class="top">
								<el-input
									type="textarea"
									:rows="2"
									placeholder="请输入备注"
                  disabled
									v-model="formData.remark"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="查看附件" prop="file" class="top">
                <el-empty description="暂无附件" :image-size="70" v-if="formData.mAttachmentInfoList.length === 0"></el-empty>
                <ul class="el-upload-list el-upload-list--text" v-else>
                  <li v-for="item in formData.mAttachmentInfoList" :key="item.id" class="el-upload-list__item is-success">
                    <a class="el-upload-list__item-name" @click="downLoadFile(item)">
                      <i class="iconfont icon-a-filetxt-line"/>
                      {{ item.name }}
                    </a>
                    <label class="el-upload-list__item-status-label">
                      <i class="el-icon-upload-success el-icon-circle-check" />
                    </label>
                    <i class="el-icon-view" @click="handlePreview(item)" />
                  </li>
                </ul>
							</el-form-item>
						</el-col>

					</el-row>
				</el-form>
			</el-collapse-item>
      <el-collapse-item title="货转明细" name="2">
        <template slot="title">
          <div class="slotTitle">
            <span>货转明细</span>
            <el-button type="text" @click.stop="addStacking" v-if="!cargoStatus">新增</el-button>
          </div>
        </template>
        <BaseTable
            :data="stackingPositionList"
            :columns="stackingPositionListColumns"
            :tableHeight="300"
            :pagination="false"
        ></BaseTable>
			</el-collapse-item>
		</el-collapse>
    <!-- 新建货权转移明细 -->
    <el-dialog
      title="新增货权转移明细"
      :visible.sync="openCargo"
      v-if="openCargo"
      width="50%"
      append-to-body>
      <addCargo :height="300" ref="addCargo"/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="openCargo = false">取 消</el-button>
        <el-button type="primary" @click="addCargoTransferDetail">确 定</el-button>
      </span>
    </el-dialog>
	</div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import publicapi from '@/api/public'
import axios from 'axios'
import config from '@/network/config.js'
import api from '@/api/yardTally/cargoTransfer'
import addCargo from './addCargo.vue'
export default {
  name: 'cargoTransferDetail',
  components: { BaseTable, addCargo },
  props: {
    shipVoyageData: {
      type: Array
    },
    compData: {
      type: Array
    },
    customerData: {
      type: Array
    },
    cargoOwnerData: {
      type: Array
    },
    cargoAgentData: {
      type: Array
    },
    issuingData: {
      type: Array
    },
    cargoData: {
      type: Array
    },
    // 查看true 新增false，控制input框的disabled
    cargoStatus: {
      type: Boolean
    }

  },
  data() {
    return {
      activeNames: ['1', '2'],
      formData: { 'transferType': 2, 'id': '',
        'mAttachmentInfoList': [],
        'cargoOwnerName': '',
        'cargoAgentName': '',
        'cargoInfoIdSource': '', 'cargoOwnerId': '', 'cargoAgentId': '', 'storageDate': '', 'transferDate': '', 'quantity': '', 'ton': '', 'volume': '', 'remark': '' }, // from
      queryAll: {
        startpage: 1,
        pagesize: 10,
        cargoInfoId: '',
        tally: ''
      },
      totalNum: 0,
      yph: '',
      fileList: [],
      openCargo: false, // 查看附件dialog
      tradeData: [
        { tradeName: '内贸', tradeType: '内贸' },
        { tradeName: '外贸', tradeType: '外贸' }
      ],
      packingData: [
        { packingName: '散', packing: 1 },
        { packingName: '件', packing: 2 }
      ],
      rules: {
        transferDate: [
          { required: true, message: '请选择货转日期', trigger: 'blur' }
        ],
        cargoOwnerId: [
          { required: true, message: '请选择目标货主', trigger: 'blur' }
        ],
        cargoAgentId: [
          { required: true, message: '请选择目标货代', trigger: 'blur' }
        ],
        storageDate: [
          { required: true, message: '请选择堆存费起算日期', trigger: 'blur' }
        ],
        quantity: [
          { required: true, message: '请输入货转件数', trigger: 'blur' }
        ],
        ton: [
          { required: true, message: '请输入货转重量', trigger: 'blur' }
        ],
        volume: [
          { required: true, message: '请输入货转体积', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入备注', trigger: 'blur' }
        ]
      },
      isShow: false, // 是否显示票货弹窗
      stackingPositionList: [], // 垛位数据
      stackingPositionListColumns: [
        { prop: 'position', label: '垛号' },
        { prop: 'pieceNo', label: '件号' },
        { prop: 'quantityStorage', label: '场存件数' },
        { prop: 'tonStorage', label: '场存重量' },
        { prop: 'volumeStorage', label: '场存体积' },
        {
          prop: 'quantity',
          label: '货转件数',
          render: (h, params) => {
            return h(
              'div',
              [
                h('el-input', {
                  props: {
                    value: params.row.quantity,
                    type: 'text',
                    size: 'mini',
                    placeholder: '请输入根数',
                    disabled: this.cargoStatus
                  },
                  on: {
                    input: e => {
                      console.log(e)
                      this.$set(this.stackingPositionList[params.row.index], 'quantity', e)
                    }
                  }
                })
              ])
          }
        },
        {
          prop: 'ton',
          label: '货转重量',
          render: (h, params) => {
            return h(
              'div',
              [
                h('el-input', {
                  props: {
                    value: params.row.ton,
                    type: 'text',
                    size: 'mini',
                    placeholder: '请输入重量',
                    disabled: this.cargoStatus
                  },
                  on: {
                    input: e => {
                      console.log(e)
                      this.$set(this.stackingPositionList[params.row.index], 'ton', e)
                    }
                  }
                })
              ])
          }
        },
        {
          prop: 'volume',
          label: '货转体积',
          render: (h, params) => {
            return h(
              'div',
              [
                h('el-input', {
                  props: {
                    value: params.row.volume,
                    type: 'text',
                    size: 'mini',
                    placeholder: '请输入体积',
                    disabled: this.cargoStatus
                  },
                  on: {
                    input: e => {
                      console.log(e)
                      this.$set(this.stackingPositionList[params.row.index], 'volume', e)
                    }
                  }
                })
              ])
          }
        },
        {
          label: '操作',
          fixed: 'right',
          align: 'center',
          width: 150,
          disabled: this.cargoStatus,
          render: (h, params) => {
            return h(
              'div',

              [

                h('el-button', {
                  props: {
                    size: 'mini'
                  },

                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    // innerHTML: `<i class="iconfont icon-tubiao_liebiaoshanchu" style="color:#DA2821"></i> 删除`
                    innerHTML: `<span style='color:#F75E5E'><i class='iconfont icon-1-08'></i><span  style='padding-left:5px;'>删除</span></span>`
                  },
                  on: {
                    click: () => {
                      this.handleDelete(params.row)
                    }
                  }
                })
              ]
            )
          }
        }
      ]
    }
  },
  watch: {
    ruleForm: {
      handler(value) {
        console.log(value)
      },
      immediate: true
    }
  },
  methods: {
    /**
     * 打开drawer，展示货转列表，选择
     */
    addStacking() {
      this.openCargo = true
      this.$nextTick(() => {
        this.$refs.addCargo.queryAll.cargoInfoId = this.queryAll.cargoInfoId
        this.$refs.addCargo.queryAll.tally = this.queryAll.tally
      })
    },
    /**
     * 选择货转信息，新建货转明细
     */
    addCargoTransferDetail() {
      const data = JSON.parse(JSON.stringify(this.$refs.addCargo.selectData))
      data.forEach(item => {
        if (this.queryAll.tally === '1') { // 有件号，填充，去重
          item.quantity = item.quantitySum
          item.ton = item.tonSum
          item.volume = item.volumeSum
          const result = this.stackingPositionList.some(i => i.pieceNo === item.pieceNo)
          if (result) return
          this.stackingPositionList.push(item)
        } else { // 无件号，去重
          const result = this.stackingPositionList.some(i => i.pieceNo === item.pieceNo)
          if (result) return
          this.stackingPositionList.push(item)
        }
      })
      this.openCargo = false
    },
    /**
     * 删除票货信息
     */
    handleDelete(row) {
      if (this.queryAll.tally === '1') { // 有件号，填充，去重
        this.stackingPositionList = this.stackingPositionList.filter(item => item.pieceNo !== row.pieceNo)
      } else { // 无件号，去重
        this.stackingPositionList = this.stackingPositionList.filter(item => item.position !== row.position)
      }
    },
    /**
     * 预览附件
     */
    handlePreview(file) {
      console.log(file);
      if (file.fileName.indexOf('jpg') !== -1 || file.fileName.indexOf('png') !== -1 || file.fileName.indexOf('jpeg') !== -1) {
        axios({
          method: 'get',
          url: `${config.ConfigBaseURL}/wfpms-master-service/api/external/publics/file/down?id=${file.fileId}`,
          responseType: 'arraybuffer',
          params: {
            token: window.sessionStorage.getItem('token')
          }
        }).then(res => {
          const blob = new Blob([res.data], {
            type: 'application/png;charset=utf-8'
          });
          const url = window.URL.createObjectURL(blob);
          this.imgurl = url
          this.dialogVisible = true
        })
      } else {
        this.downLoadFile(file)
      }
    },
    /**
     * 下载附件
     */
    async downLoadFile(file) {
      const res = await publicapi.down(file.fileId)
      const content = res.data
      const blob = new Blob([content]) // 构造一个blob对象来处理数据
      const link = document.createElement('a') // 创建a标签
      link.download = file.fileName // a标签添加属性
      link.style.display = 'none'
      link.href = URL.createObjectURL(blob, {
        type: `application/pdf`
      })
      document.body.appendChild(link)
      link.click() // 执行下载
      URL.revokeObjectURL(link.href) // 释放url
      document.body.removeChild(link) // 释放标签
    },
    /**
     * 按钮事件
     */
    buttonClick(i) {
      i()()
    }
  }
}
</script>

<style lang="less" scoped>
@import "../component/index.less";
  .el-upload-list__item:hover .el-icon-view {
    display: inline-block;
  }
  /deep/ .el-empty {
    padding: 0;
  }
  /deep/ .el-empty__description {
    margin-top: 0px;
  }
  .el-upload-list__item .el-icon-view {
    display: none;
    position: absolute;
    top: 8px;
    right: 35px;
    cursor: pointer;
    opacity: .75;
    color: #606266;
  }
  .el-upload-list__item .el-icon-close {
    display: none;
    position: absolute;
    top: 8px;
  }
  .el-upload-list__item-status-label {
    position: absolute;
    right: 5px;
    top: 3px;
    line-height: inherit;
    display: none;
}
[v-cloak] {
	display: none;
}
</style>
